<template>
	<div @click="showdetail" class="mes_card">
		<div class="mes_card_top">
			<div style="padding-top: 20px;padding-left: 20px;" class="decription">
				<img width="20" height="20" src="https://obscloud.ulearning.cn/resources/web/17138858891083214.png">
				<div class="title">
					<p> {{ title }}</p>
				</div>
				<view class="type">
					<view class="action">
						<view class="cu-tag round bg-orange light">{{types}}</view>
					</view>
				</view>
			</div>
			<!-- <div style="margin-top: 10px;" class="title">
					<p> {{ title }}</p>
				</div> -->
		</div>
		<div class="mes_card_body">
			<div>
				<img :src="pic" class="headimg" />
			</div>
			<div>
				<div class="card_content">
					{{ content }}
				</div>
			</div>
		</div>
		<div class="mes_card_bottom" style="color: #0081ff;">
			{{time.substring(0,10)}}
		</div>
	</div>
	<!-- <view class="mes" @click="showdetail">
		<img :src="pic" alt="" class="headimg" />
		<view>
			<h2 class="title">{{title}}</h2>
			<view class="content">
				{{Content}}
			</view>
			<view class="timeAndType">
				<view class="time">
					{{time.substring(0,10)}}
				</view>
				<view class="type">
					<view class="action">
						<view class="cu-tag round bg-orange light">{{types}}</view>
					</view>
				</view>
			</view>
		</view>
	</view> -->
</template>

<script>
	import {
		truncateString
	} from '@/store/constants.js'
	export default {
		props: ['title', 'pic', 'content', 'id', 'time', 'types'],
		mounted() {
			this.Content = truncateString(this.content)
		},
		data() {
			return {
				Content: ''
			}
		},
		methods: {
			showdetail() {
				console.log(this.id)
				uni.navigateTo({
					url: `/subpkg/mes_detail/mes_detail?id=${this.id}`
				})
			}
		}
	}
</script>

<style scoped lang="less">
	@media screen and (min-width: 600px) {}

	.decription {
		display: flex;
		justify-content: space-between;
		padding-right: 20px;
	}

	.card_content {
		padding: 20px;
	}

	.mes_card {
		width: 94%;
		margin: 3%;
		margin-right: 10px;
		background-color: #fff;
		margin-bottom: 20px;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		padding-bottom: 20px;
	}

	.mes_card_top {
		width: 100%;
		margin-bottom: 20px;

	}

	.mes_card_bottom {
		width: 100%;
		display: flex;
		justify-content: end;
		padding-right: 20px;
		padding-top: 20px;
	}

	.mes_card_body {
		width: 90%;
		padding: 10%;
		display: flex;
		justify-content: start;
		flex-direction: row;
		background-color: #f3f7fa;
		padding: 10px;
		align-items: center;
		align-content: center;
		border-radius: 5px;

	}

	.meslist {
		position: relative;
		z-index: 1;
		padding: 18rpx;
	}

	/* 单个卡片 */
	.mes {
		align-items: center;
		z-index: 5;
		display: flex;
		border-radius: 10rpx;
		padding-top: 3vh;
		padding-bottom: 3vh;
		box-shadow: 1px 3px 5px 3px #888888;
		background-color: #fefefe;
		margin: 15rpx;
	}

	.headimg {
		width: 60px;
		height: 60px;
		margin-left: 6rpx;
		border-radius: 10px;
		// margin-bottom: 10rpx;
	}

	.content {
		width: 490rpx;
		font-size: 40rpx;
		-webkit-line-clamp: 2;
		margin-left: 15rpx;

	}

	.title {
		font-weight: 600;
		font-size: 35rpx;
		margin-left: 40rpx;
	}

	.bg {
		width: 100%;
		height: 74%;
		z-index: 0;
		position: absolute;
	}

	.status {
		// margin-top: -15rpx;
		font-size: small;
		margin-right: 5rpx;
	}
	</style>